<template>
  <div id="app">
    <div class="detail-body">
      <div class="detail-body-left">
        <div class="detail-body-main">
          <div class="main-head">
            <el-button :icon="Plus"> 上传附件 </el-button>
          </div>
          <div class="main-body">
            <el-table border style="width: 100%; height: 100%" height="32">
              <template #empty>
                <div class="empty-status">
                  <el-text>暂无数据</el-text>
                </div>
              </template>
              <el-table-column label="附件名称" />
              <el-table-column label="附件大小" />
              <el-table-column label="上传人" />
              <el-table-column label="上传时间" />
              <el-table-column label="来源" />
              <el-table-column label="操作">
                <el-button type="primary" class="is-link">预览</el-button>
                <el-button type="primary" class="is-link">下载</el-button>
                <el-button type="primary" class="is-link">重命名</el-button>
                <el-button type="primary" class="is-link">删除</el-button>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'
</script>
<style scoped>
.detail-body {
  display: flex;
}

.detail-body-left {
  flex: 1;
  min-width: 20px;
  width: 0;
}

.detail-body-main {
  height: auto;
  margin: 16px 8px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 8px #172b4d1a;
  overflow: hidden;
  padding: 10px;
}

.main-head {
  font-size: 0;
  margin-bottom: 16px;
  position: relative;
  text-align: right;
}

.main-body {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 2px 8px #172b4d1a;
  position: relative;
  z-index: 1;
  height: 400px;
}

.empty-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
